<template>
	<view>
		<div class="top">
			<img class="bg-top" src="@/static/bg-top.png" alt="bg">
			<p>智慧城市大脑管理大屏</p>
			<img src="@/static/logo.png" alt="logo" class="logo">

			<div class="time-weather">
				<div class="time-box">
					<div class="time">{{time}}</div>
					<div class="date">{{date}}</div>
				</div>
				<div class="show-village-list">
					<div class="village-name" @click="showVillageList = !showVillageList">
						{{selectVillageIndex== -1?'切换项目':villageList[selectVillageIndex].villageName}}
					</div>
					<div class="arrows-dowm"></div>

					<div class="village-list" v-if="showVillageList">
						<div v-for="(item,index) of villageList" @click="goNewVillage(item.villageId,index)"
							:class="{'select-village':index == selectVillageIndex}" class="village-item">
							{{item.villageName}}
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="nav-data-list">
			<img src="@/static/decorate-left.png" alt="decorate" class="decorate">
			<div class="nav-data-item">
				<div>村委总数</div>
				<div class="blue">{{homeTopData.villageCount}}</div>
				<div>
					<div>村小组数：<text class="blue">{{homeTopData.villageSubCount}}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>月卡用户</div>
				<div class="blue">{{homeTopData.monthCardUser}}</div>
				<div>
					<div>黑名单：<text class="blue">{{homeTopData.blackList}}</text></div>
					<div>白名单：<text class="blue">{{homeTopData.whiteList}}</text></div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>今日月卡开通(元)</div>
				<div class="orange">{{homeTopData.todayPractical}}</div>
				<div>
					<div>较昨日 <text :class="{'green':homeTopData.compareDayRate>=0,'red':homeTopData.compareDayRate<0}">
							{{homeTopData.compareDayRate}}%</text>
					</div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>今日临停实收(元)</div>
				<div class="orange">{{homeTopData.todayStop}}</div>
				<div>
					<div>较昨日 <text
							:class="{'green':homeTopData.compareDayStopRate>=0,'red':homeTopData.compareDayStopRate<0}">
							{{homeTopData.compareDayStopRate}}%</text>
					</div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>本月临停实收(元)</div>
				<div class="orange">{{homeTopData.monthStop}}</div>
				<div>
					<div>较上月 <text
							:class="{'green':homeTopData.compareMonthStopRate>=0,'red':homeTopData.compareMonthStopRate<0}">
							{{homeTopData.compareMonthStopRate}}%</text>
					</div>
				</div>
			</div>
			<div class="nav-data-item">
				<div>当前欠款金额(元)</div>
				<div class="yellow">{{homeTopData.debtAmount}}</div>
				<div>
					<div>逃费次数：<text class="blue">{{homeTopData.dodgeFeeCount}}</text></div>
					<div>逃费金额：<text class="blue">¥{{homeTopData.dodgeFee}}</text></div>
				</div>
			</div>
			<img src="@/static/decorate-right.png" alt="decorate" class="decorate">
		</div>

		<div class="clll-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div>车辆流量</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="clll-nav-list">
					<!-- <div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{clllEchartHear.todayInCount}}</div>
						<div>今日入场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{clllEchartHear.weekInCount}}</div>
						<div>本周入场数</div>
					</div> -->
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{clllEchartHear.monthInCount}}</div>
						<div>本月入场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-01.png" alt="icon" class="icon">
						<div class="blue">{{clllEchartHear.monthOutCount}}</div>
						<div>本月出场数</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-02.png" alt="icon" class="icon">
						<div class="orange">{{clllEchartHear.practicalAmount}}</div>
						<div>本月实收金额</div>
					</div>
					<div class="clll-nav-item">
						<img src="@/static/icon-03.png" alt="icon" class="icon">
						<div class="yellow">{{clllEchartHear.discountsAmount}}</div>
						<div>本月优惠金额</div>
					</div>
				</div>

				<div id="clll-echart" ref="clllEchart"></div>
				<div class="select-time">
					<div @click="showClllTimeFn">
						<block v-if="!showClllTime">{{yearList[clllTime[0]]}}年{{monthList[clllTime[1]]}}月</block>
						<block v-if="showClllTime">确定</block>
					</div>
					<div @click="showClllTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showClllTime"
						:value="clllTime" @change="changeClllTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</div>
			</div>
		</div>

		<div class="tsjy-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div style="display: flex;align-items: center;">
					<div>投诉建议</div>
					<div v-if="overdueList.length != 0" class="box-title-tip blink" @click.stop="openWindows(1)">
						<div class="box-title-error ">!</div>您有<span class="box-title-num">{{total}}</span>条投诉建议工单已逾期
					</div>
				</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div>
						<div class="orange">{{tsjyHeadData.assigned}}</div>
						<div>待指派</div>
					</div>
					<div>
						<div style="color: #DDF7FF;">{{tsjyHeadData.followUp}}</div>
						<div>跟进中</div>
					</div>
					<div>
						<div class="blue">{{tsjyHeadData.finish}}</div>
						<div>已完成</div>
					</div>
					<div>
						<div class="red">{{tsjyHeadData.overdue}}</div>
						<div>已逾期</div>
					</div>
				</div>
				<div class="select-time">
					<div @click="showTsjyTimeFn">
						<block v-if="!showTsjyTime">{{yearList[tsjyTime[0]]}}年{{monthList[tsjyTime[1]]}}月</block>
						<block v-if="showTsjyTime">确定</block>
					</div>
					<div @click="showTsjyTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showTsjyTime"
						:value="tsjyTime" @change="changeTsjyTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="tsjy-echart-left" ref="tsjyEchartLeft"></div>
				<div id="tsjy-echart-right" ref="tsjyEchartRight"></div>
			</div>
		</div>

		<div class="rcgl-box">
			<div class="box-title">
				<div class="triangle"></div>
				<div style="display: flex;align-items: center;">
					<div>日常管理</div>
					<div v-if="dateOverdueList.length != 0" class="box-title-tip blink" @click.stop="openWindows(2)">
						<div class="box-title-error ">!</div>您有<span
							class="box-title-num">{{dateTotal}}</span>条日常查处工单已逾期
					</div>
				</div>
				<!-- <div>查看详情</div> -->
			</div>
			<div class="box-main">
				<div class="main-data-list">
					<div>
						<div class="blue">{{rcglHeadData.todayCount}}</div>
						<div>今日查处</div>
					</div>
					<div>
						<div class="blue">{{rcglHeadData.weekCount}}</div>
						<div>本周查处</div>
					</div>
					<div>
						<div class="blue">{{rcglHeadData.monthCount}}</div>
						<div>本月查处</div>
					</div>
				</div>
				<div class="select-time">
					<div @click="showRcglTimeFn">
						<block v-if="!showRcglTime">{{yearList[rcglTime[0]]}}年{{monthList[rcglTime[1]]}}月</block>
						<block v-if="showRcglTime">确定</block>
					</div>
					<div @click="showRcglTimeFn" class="arrows-dowm"></div>

					<picker-view class="pick-time" indicator-class="pitch-item"
						mask-style='background: rgba(0, 0, 0, 0)' indicator-style="height: 32px;" v-if="showRcglTime"
						:value="rcglTime" @change="changeRcglTime">
						<picker-view-column>
							<view v-for="item of yearList" class="pick-item">{{item}}年</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="item of monthList" class="pick-item">{{item}}月</view>
						</picker-view-column>
					</picker-view>
				</div>
				<div id="rcgl-echart-left" ref="rcglEchartLeft"></div>
				<div id="rcgl-echart-right" ref="rcglEchartRight"></div>
			</div>
		</div>

		<img src="@/static/bg-bottom.png" alt="bottom" class="bottom-img">

		<div v-if="detailStatus" class="maskLayer" @click.stop="detailStatus = false">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>{{openType == 1 ? '投诉建议逾期列表' : '日常查处逾期列表'}}</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="detailStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list">
					<div class="maskLayer-detail-title">
						<div>序号</div>
						<div>村委名称</div>
						<div>工单编号</div>
						<div>分类名称</div>
						<div>内容</div>
						<div>指派时间</div>
						<div>预计完成时间</div>
						<div>处理人</div>
						<div>状态</div>
					</div>
					<div class="maskLayer-list-box">
						<div v-for="(item,index) in overdueList" :key="index" class="maskLayer-detail-title"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{item.serialNumber}}</div>
							<div>{{item.villageName}}</div>
							<div>{{item.code}}</div>
							<div>{{item.subTypeName}}</div>
							<div>{{item.content}}</div>
							<div>{{item.assignedTime}}</div>
							<div>{{item.planCompleteTime}}</div>
							<div>{{item.handlerName}}</div>
							<div style="color: #FD5421;">已逾期</div>
						</div>
					</div>
				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{total}}个结果</view>
						<Pagination class=" hoverClass" :total="total" :pageSize="pageSize" :nowPage="nowPage"
							@change="change">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="nowPageNum" @confirm="changeSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>


		<div v-if="detailDateStatus" class="maskLayer" @click.stop="detailDateStatus = false">
			<div class="maskLayer-detail" @click.stop="">
				<!-- 顶部 -->
				<div class="maskLayer-detailTop">
					<div class="box-title">
						<div class="triangle"></div>
						<div>{{openType == 1 ? '投诉建议逾期列表' : '日常查处逾期列表'}}</div>
					</div>
					<!-- 关闭按钮 -->
					<div class="close-item hoverClass" @click.stop="detailDateStatus = false">
						<img class="close" src="../static/icon-close.png" mode="">
					</div>
				</div>
				<!-- list -->
				<div class="maskLayer-detail-list">
					<div class="maskLayer-detail-title">
						<div>序号</div>
						<div>村委名称</div>
						<div>工单编号</div>
						<div>分类名称</div>
						<div>内容</div>
						<div>指派时间</div>
						<div>预计完成时间</div>
						<div>处理人</div>
						<div>状态</div>
					</div>
					<div class="maskLayer-list-box">
						<div v-for="(item,index) in dateOverdueList" :key="index" class="maskLayer-detail-title"
							:class="index % 2 == 0 ? 'color1' : 'color2'">
							<div>{{item.serialNumber}}</div>
							<div>{{item.villageName}}</div>
							<div>{{item.code}}</div>
							<div>{{item.subTypeName}}</div>
							<div>{{item.content}}</div>
							<div>{{item.assignedTime}}</div>
							<div>{{item.planCompleteTime}}</div>
							<div>{{item.handlerName}}</div>
							<div style="color: #FD5421;">已逾期</div>
						</div>
					</div>

				</div>
				<!-- 分页 -->
				<view class="pages-box">
					<view class="pages">
						<view class="pages-total">共{{dateTotal}}个结果</view>
						<Pagination class=" hoverClass" :total="dateTotal" :pageSize="datePageSize"
							:nowPage="dateNowPage" @change="dateChange">
						</Pagination>
						<view class="pagesSize">
							<view class="">前往</view>
							<input type="number" v-model="dateNowPageNum" @confirm="dateChangeSearch()">
							<view class="">页</view>
						</view>
					</view>
				</view>
			</div>
		</div>

	</view>
</template>

<script>
	import * as echart from 'echarts'
	import '@/static/echarts-tooltip-carousel.js'
	import Pagination from "@../../components/bwm-pagination/bwm-pagination.vue" // 分页组件

	let clllEchartTools = null
	let tsjyEchartTools = null
	let rcglEchartRightTools = null
	export default {
		components: {
			Pagination,
		},
		data() {
			return {
				sensitive: 0,
				openType: 0,
				url: getApp().globalData.url,
				// ----- 投诉逾期分页 ----- //
				overdueList: [],
				detailStatus: false, // 详情状态
				total: 0, // 项目列表总页数
				pageSize: 10, // 项目列表每页条数
				nowPage: 1, // 项目列表当前页码
				nowPageNum: 1, // 项目列表当前页码
				// ----- 日常逾期分页 ----- //
				dateOverdueList: [],
				detailDateStatus: false, // 详情状态
				dateTotal: 0, // 项目列表总页数
				datePageSize: 10, // 项目列表每页条数
				dateNowPage: 1, // 项目列表当前页码
				dateNowPageNum: 1, // 项目列表当前页码

				interval: true,
				time: '',
				date: '',
				weather: '',
				temperature: '',
				showVillageList: false,
				selectVillageIndex: -1,
				villageId: -1,
				villageList: [],
				yearList: [],
				monthList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
				homeTopData: {},

				showClllTime: false,
				clllTime: [9, 0],
				clllEchart: null,
				clllEchartHear: {},
				clllEchartOption: {
					grid: {
						top: '20%',
						bottom: 40,
						left: 60,
						right: 60,
					},
					tooltip: {
						confine: true,
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						backgroundColor: 'rgba(0, 21, 43, 0.80)',
						borderColor: 'rgba(43,142,243,0.5)',
						// borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						},
					},
					legend: {
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 12,
						},
						data: [{
							name: '入场数(辆)',
							itemStyle: {
								color: '#2BC5F3'
							}
						}, {
							name: '出场数(辆)',
							itemStyle: {
								color: '#1D7AD9'
							}
						}, {
							name: '实收金额(元)',
							itemStyle: {
								color: '#FD8F21'
							}
						}, {
							name: '优惠金额(元)',
							itemStyle: {
								color: '#FDDB21'
							}
						}]
					},
					xAxis: {
						data: ['1日', '2日', '3日', '4日', '5日', '6日'],
						axisLine: {
							lineStyle: {
								color: '#ccc'
							}
						},
						axisTick: {
							show: false
						},
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						}
					},
					yAxis: [{
							type: 'value',
							name: '单位:辆',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#1D7AD9'
								}
							},
							splitLine: {
								lineStyle: {
									color: 'rgba(204, 204, 204, .3)',
									type: 'dashed'
								}
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							},
							// min: 0,
							// max: 250,
							// interval: 50,
							// axisLabel: {
							//   formatter: '{value} ml'
							// }
						},
						{
							type: 'value',
							name: '单位:元',
							axisLine: {
								show: true,
								lineStyle: {
									color: '#AF6113'
								}
							},
							splitLine: {
								show: false,
							},
							nameTextStyle: {
								color: '#fff',
								fontSize: 12
							},
							axisLabel: {
								color: '#fff',
								fontSize: 12,
							}
							// min: 0,
							// max: 25,
							// interval: 5,
							// axisLabel: {
							//   formatter: '{value} °C'
							// }
						}
					],
					series: [{
							name: '入场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [5, 20, 36, 10, 10, 20],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '出场数(辆)',
							type: 'bar',
							barGap: 0,
							data: [10, 40, 46, 20, 20, 30],
							itemStyle: {
								color: {
									type: 'linear',
									x: 0,
									y: 0,
									x2: 0,
									y2: 1,
									colorStops: [{
										offset: 0,
										color: 'rgba(29, 122, 217, 1)' // 0% 处的颜色
									}, {
										offset: 1,
										color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
									}],
									global: false // 缺省为 false
								}
							}
						},
						{
							name: '实收金额(元)',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							yAxisIndex: 1,
							itemStyle: {
								color: 'rgba(253, 143, 33, 1)',
								borderWidth: 0,
							},
							lineStyle: {
								color: 'rgba(253, 143, 33, 1)',
							},
							data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, ]
						},
						{
							name: '优惠金额(元)',
							type: 'line',
							symbol: 'circle',
							symbolSize: 4,
							yAxisIndex: 1,
							itemStyle: {
								color: 'rgba(253, 219, 33, 1)',
								borderWidth: 0,
							},
							lineStyle: {
								color: 'rgba(253, 219, 33, 1)',
							},
							data: [4.0, 4.4, 6.6, 8.5, 12.3, 23.2, ]
						},
					],
				},

				showTsjyTime: false,
				tsjyTime: [9, 0],
				tsjyHeadData: {},
				tsjyEchartLeft: null,
				tsjyEchartLeftOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 25,
						padding: [5, 20, 5, 5],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
						type: 'pie',
						radius: ['45%', '46%'],
						center: ['50%', '65%'],
						emphasis: {
							disabled: 'disabled',
						},
						tooltip: {
							show: false,
						},
						labelLine: {
							show: false,
						},
						label: {
							show: false,
						},
						data: [{
							value: 25,
							itemStyle: {
								color: '#26DDF2'
							}
						}]
					}, {
						name: '投诉建议',
						type: 'pie',
						radius: ['0%', '40%'],
						center: ['50%', '65%'],
						avoidLabelOverlap: false,
						// emphasis: {
						// 	label: {
						// 		show: true,
						// 		fontSize: 40,
						// 		fontWeight: 'bold'
						// 	}
						// },
						// labelLine: {
						// 	show: false,
						// },
						labelLine: {
							show: true,
						},
						label: {
							show: true,
							formatter: '{b|{b}} {per|{d}%} ',
							rich: {
								b: {
									fontSize: 10,
									color: 'inherit',
								},
								per: {
									fontSize: 10,
									color: 'inherit',
								},
							},
						},
						data: [{
								value: 0,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							},
							{
								value: 0,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							},
							{
								value: 0,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							},
							{
								value: 0,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							},
						]
					}]
				},
				tsjyEchartRight: null,
				tsjyEchartRightOption: {
					grid: {
						top: '27%',
						bottom: 30,
						left: 70,
						right: 30,
					},
					tooltip: {
						confine: true,
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						backgroundColor: 'rgba(0, 21, 43, 0.80)',
						borderColor: 'rgba(43,142,243,0.5)',
						// borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						},
					},
					legend: {
						top: 25,
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '投诉数量',
							itemStyle: {
								color: '#2BC5F3'
							}
						}]
					},
					xAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								color: 'rgba(204, 204, 204, .3)',
								type: 'dashed'
							}
						},
						minInterval: 1,
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
					},
					yAxis: {
						name: '单位:单',
						nameTextStyle: {
							color: '#fff',
							fontSize: 12,
							padding: [0, 0, 0, 700]
						},
						data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 19,
							formatter: function(value) {
								let valueTxt = '';
								if (value.length > 4) {
									valueTxt = value.substring(0, 3) + '...';
								} else {
									valueTxt = value;
								}
								return valueTxt;
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
					},
					series: [{
						name: '投诉数量',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						itemStyle: {
							color: {
								type: 'linear',
								x: 1,
								y: 0,
								x2: 0,
								y2: 0,
								colorStops: [{
									offset: 0,
									color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}, ]
				},

				showRcglTime: false,
				rcglTime: [9, 0],
				rcglHeadData: {},
				rcglEchartLeft: null,
				rcglEchartLeftOption: {
					tooltip: {
						confine: true,
						extraCssText: 'z-index: 888',
						trigger: 'item',
						formatter: '{b|{b}}\n{c|{c}}  {per|{d}%}  ',
						backgroundColor: 'rgba(0,21,43,0.8)',
						borderColor: 'rgba(221,247,255,0.4)',
						padding: [4, 8],
						borderWidth: 1,
						borderRadius: 4,
						textStyle: {
							color: '#DDF7FF',
						},
					},
					legend: {
						top: 15,
						padding: [5, 20, 5, 5],
						data: ['待指派', '跟进中', '已完成', '已逾期', ],
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
					},
					series: [{
							name: '跟进状态',
							type: 'pie',
							radius: ['0%', '40%'],
							center: ['50%', '60%'],
							avoidLabelOverlap: false,
							labelLine: {
								show: false,
							},
							label: {
								show: false,
							},
							data: [{
									value: 0,
									name: '待指派',
									itemStyle: {
										color: '#FD8F21'
									}
								},
								{
									value: 0,
									name: '跟进中',
									itemStyle: {
										color: '#DDF7FF'
									}
								},
								{
									value: 0,
									name: '已完成',
									itemStyle: {
										color: '#26DDF2'
									}
								},
								{
									value: 0,
									name: '已逾期',
									itemStyle: {
										color: '#FD5421'
									}
								},
							]
						},
						{
							name: '违停类型',
							type: 'pie',
							radius: ['50%', '60%'],
							center: ['50%', '60%'],
							avoidLabelOverlap: false,
							labelLine: {
								show: false,
							},
							tooltip: {
								confine: true,
								show: true,
							},
							labelLine: {
								show: true,
							},
							label: {
								show: true,
								formatter: '{b|{b}}\n {c|{c}}{per|({d}%)} ',
								rich: {
									b: {
										fontSize: 10,
										lineHeight: 14,
										color: 'inherit',
									},
									c: {
										fontSize: 10,
										lineHeight: 14,
										color: 'inherit',
										textAlign: 'left',
									},
									per: {
										fontSize: 8,
										color: 'inherit',
										textAlign: 'left',
									},
								},
							},
							data: [{
									value: 123,
									name: '逃费查处',
									itemStyle: {
										color: '#2BC5F3'
									}
								},
								{
									value: 123,
									name: '违停查处',
									itemStyle: {
										color: '#1D7AD9'
									}
								},
								{
									value: 123,
									name: '乱放行为',
									itemStyle: {
										color: '#6FB6FF'
									}
								},
								{
									value: 123,
									name: '乱停行为',
									itemStyle: {
										color: '#5852FF'
									}
								}
							]
						}
					]
				},
				rcglEchartRight: null,
				rcglEchartRightOption: {
					grid: {
						top: '27%',
						bottom: 30,
						left: 70,
						right: 30,
					},
					tooltip: {
						confine: true,
						trigger: 'axis',
						axisPointer: {
							type: 'shadow'
						},
						// lineStyle: { //设置纵向指示线
						// 	type: 'dashed',
						// 	color: "rgba(255, 255, 255, 1)"
						// },
						backgroundColor: 'rgba(0, 21, 43, 0.80)',
						borderColor: 'rgba(43,142,243,0.5)',
						// borderWidth: 2,
						textStyle: {
							color: 'rgba(153, 153, 153, 1)',
							fontSize: 10,
							lineHeight: 14
						},
					},
					legend: {
						top: 25,
						itemWidth: 20,
						itemHeight: 4,
						textStyle: {
							color: '#fff',
							fontSize: 10,
						},
						data: [{
							name: '巡更次数',
							itemStyle: {
								color: '#2BC5F3'
							}
						}]
					},
					xAxis: {
						type: 'value',
						splitLine: {
							lineStyle: {
								color: 'rgba(204, 204, 204, .3)',
								type: 'dashed'
							}
						},
						minInterval: 1,
						axisLabel: {
							color: '#fff',
							fontSize: 12,
						},
					},
					yAxis: {
						name: '单位:单',
						nameTextStyle: {
							color: '#fff',
							fontSize: 12,
							padding: [0, 0, 0, 700]
						},
						data: ['大岭村委', '凌岗村委', '濠头村委', '张家边张家边', '濠头村委', '凌岗村委'],
						axisLabel: {
							color: '#fff',
							fontSize: 12,
							margin: 19,
							formatter: function(value) {
								let valueTxt = '';
								if (value.length > 4) {
									valueTxt = value.substring(0, 3) + '...';
								} else {
									valueTxt = value;
								}
								return valueTxt;
							}
						},
						axisLine: {
							lineStyle: {
								color: '#fff'
							}
						},
						axisTick: {
							show: false
						},
					},
					series: [{
						name: '巡更次数',
						type: 'bar',
						data: [5, 20, 36, 10, 10, 20],
						itemStyle: {
							color: {
								type: 'linear',
								x: 1,
								y: 0,
								x2: 0,
								y2: 0,
								colorStops: [{
									offset: 0,
									color: 'rgba(43, 197, 243, 1)' // 0% 处的颜色
								}, {
									offset: 1,
									color: 'rgba(43, 197, 243, 0)' // 100% 处的颜色
								}],
								global: false // 缺省为 false
							}
						}
					}, ]
				}
			}
		},
		watch: {
			clllEchartOption: {
				handler(newValue, oldValue) {
					this.clllEchart.clear()
					this.clllEchart.setOption(newValue);
					if(clllEchartTools) {
						clllEchartTools.clearLoop(clllEchartTools.timeTicket)
					}
					clllEchartTools = tools.loopShowTooltip(this.clllEchart, newValue, {
						loopSeries: true
					});
				},
				deep: true
			},
			tsjyEchartLeftOption: {
				handler(newValue, oldValue) {
					this.tsjyEchartLeft.setOption(newValue);
				},
				deep: true
			},
			tsjyEchartRightOption: {
				handler(newValue, oldValue) {
					this.tsjyEchartRight.setOption(newValue);
					if(tsjyEchartTools) {
						tsjyEchartTools.clearLoop(tsjyEchartTools.timeTicket)
					}
					tsjyEchartTools = tools.loopShowTooltip(this.tsjyEchartRight, this.tsjyEchartRightOption, {
						loopSeries: true
					});
				},
				deep: true
			},
			rcglEchartLeftOption: {
				handler(newValue, oldValue) {
					this.rcglEchartLeft.setOption(newValue);
				},
				deep: true
			},
			rcglEchartRightOption: {
				handler(newValue, oldValue) {
					this.rcglEchartRight.setOption(newValue);
					if(rcglEchartRightTools) {
						rcglEchartRightTools.clearLoop(rcglEchartRightTools.timeTicket)
					}
					rcglEchartRightTools = tools.loopShowTooltip(this.rcglEchartRight, this.rcglEchartRightOption, {
						loopSeries: true
					});
					console.log(rcglEchartRightTools)
				},
				deep: true
			},
		},
		onLoad(options) {
			this.sensitive = this.getQueryVariable('sensitive') ? this.getQueryVariable('sensitive') : 0
			// if (options.id == undefined) {
			// 	this.selectVillageIndex = -1
			// 	this.villageId = -1
			// } else {
			// 	this.selectVillageIndex = options.index
			// 	this.villageId = options.id
			// }

			const date = new Date()
			const year = date.getFullYear()
			for (let i = 0; i < 10; i++) {
				this.yearList = [year - i, ...this.yearList]
			}
			this.clllTime = [9, date.getMonth()]
			this.tsjyTime = [9, date.getMonth()]
			this.rcglTime = [9, date.getMonth()]

			this.getTime();
			setInterval(_ => {
				this.getTime();
			}, 10)
			this.getTemperature();

			setTimeout(_ => {
				this.clllEchart = this.$echarts.init(this.$refs.clllEchart);
				// this.clllEchart.setOption(this.clllEchartOption);
				// clllEchartTools = tools.loopShowTooltip(this.clllEchart, this.clllEchartOption, {
				// 	loopSeries: true
				// });

				this.tsjyEchartLeft = this.$echarts.init(this.$refs.tsjyEchartLeft);
				// this.tsjyEchartLeft.setOption(this.tsjyEchartLeftOption);

				this.tsjyEchartRight = this.$echarts.init(this.$refs.tsjyEchartRight);
				// this.tsjyEchartRight.setOption(this.tsjyEchartRightOption);
				// tsjyEchartTools = tools.loopShowTooltip(this.tsjyEchartRight, this.tsjyEchartRightOption, {
				// 	loopSeries: true
				// });

				this.rcglEchartLeft = this.$echarts.init(this.$refs.rcglEchartLeft);
				// this.rcglEchartLeft.setOption(this.rcglEchartLeftOption);

				this.rcglEchartRight = this.$echarts.init(this.$refs.rcglEchartRight);
				// this.rcglEchartRight.setOption(this.rcglEchartRightOption);
				// rcglEchartRightTools = tools.loopShowTooltip(this.rcglEchartRight, this.rcglEchartRightOption, {
				// 	loopSeries: true
				// });
			}, 100)

			if (options.id != undefined) {
				this.getGetProjList(options)
				// this.getData()
				this.getOverdueData(options.id, 1)
				this.getOverdueData(options.id, 2)
			} else {
				this.getGetProjList('')
				this.getData()
				this.getOverdueData(this.villageId, 1)
				this.getOverdueData(this.villageId, 2)
			}
			// this.changeVillage(options.id,options.index);
			// 监控页面大小变化更新页面
			uni.onWindowResize((res) => {
				this.$router.go(0)
			})
			
			setInterval(_=>{
				this.getData()
			},900000)
			// },10000)
		},
		methods: {
			change(nowPage) { // 获取当前分页
				this.nowPage = nowPage;
				this.getOverdueData(this.villageId, 1);
			},
			changeSearch() { // 获取当前分页
				this.nowPage = parseInt(this.nowPageNum);
				this.getOverdueData(this.villageId, 1);
			},
			dateChange(nowPage) { // 获取当前分页
				this.dateNowPage = nowPage;
				this.getOverdueData(this.villageId, 2);
			},
			dateChangeSearch() { // 获取当前分页
				this.dateNowPage = parseInt(this.dateNowPageNum);
				this.getOverdueData(this.villageId, 2);
			},
			getData() {
				this.getHomeTopData()
				this.getSuggestData()
				this.getInvestigateData()
				this.getPunchRecordData()
				this.getVehicleaccessData()

				// let time = setInterval(() => { // 等待地图挂载
				// 	if (this.interval) {
				// 		this.getVehicleaccessData()
				// 	}
				// }, 100)
			},
			// 获取村委列表
			getGetProjList(options) {
				uni.request({
					url: this.url + '/largescreen/GetProjList?sensitive=' + this.sensitive,
					method: 'GET',
					success: e => {
						// console.log(e.data.data.result)
						this.villageList = e.data.data.result
						// this.villageId = this.villageList[0].villageId
						// this.getData()
						if (options != '') {
							this.changeVillage(options.id, options.index)
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			goNewVillage(id, index) {
				// this.changeVillage(id, index);
				this.showVillageList = false
				let {
					href
				} = this.$router.resolve({
					path: `https://chebo.h-shock.com/stat/index.html#/?sensitive=${this.sensitive}`,
					query: {
						id: id,
						index: index,
					}
				});
				// let url = `https://chebo.h-shock.com/stat/index.html#/?id=${id}&index=${index}&sensitive=${this.sensitive}`
				let url = `https://chebo.h-shock.com/stat/index.html#/pages/project?id=${id}&sensitive=${this.sensitive}`
				// window.open("https://chebo.h-shock.com/stat/index.html#/?id="+id +"&index="+index, '_blank');
				window.open(url, '_blank');
			},
			changeVillage(id, index) {
				// 判断是否选中已经选中的
				if (this.selectVillageIndex == index) { // 已选中取消选中
					this.selectVillageIndex = -1
					this.villageId = -1
				} else { // 未选中 赋值选中
					this.selectVillageIndex = index
					this.villageId = id

					// uni.setNavigationBarTitle({
					// 	title: this.villageList[this.selectVillageIndex].villageName
					// })
				}
				this.showVillageList = false
				// debugger
				this.getData()
			},
			// 获取头部数据
			getHomeTopData() {
				const date = new Date()
				uni.request({
					url: this.url + '/largescreen/Hometop?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: date.getFullYear(),
						month: date.getMonth() + 1,
						sensitive: this.sensitive,
					},
					success: e => {
						// console.log(e.data.data)
						this.homeTopData = e.data.data
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取车流数据
			getVehicleaccessData() {
				uni.request({
					url: this.url + '/largescreen/Vehicleaccess?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: this.yearList[this.clllTime[0]],
						month: this.monthList[this.clllTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						// console.log(e.data.data)
						const data = e.data.data
						this.clllEchartOption.xAxis.data = data.xAxis
						this.clllEchartOption.series[0].data = data.yAxis_InCar
						this.clllEchartOption.series[1].data = data.yAxis_OutCar
						this.clllEchartOption.series[2].data = data.yAxis_Practical
						this.clllEchartOption.series[3].data = data.yAxis_Discounts
						this.clllEchartHear = {
							discountsAmount: data.discountsAmount,
							monthInCount: data.monthInCount,
							practicalAmount: data.practicalAmount,
							todayInCount: data.todayInCount,
							weekInCount: data.weekInCount,
							monthOutCount: data.monthOutCount,
							todayStop: data.todayStop,
							monthStop: data.monthStop,
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			showClllTimeFn() {
				this.showClllTime = !this.showClllTime
				if (!this.showClllTime) {
					this.getVehicleaccessData()
				}
			},
			showTsjyTimeFn() {
				this.showTsjyTime = !this.showTsjyTime
				if (!this.showTsjyTime) {
					this.getSuggestData()
					this.getOverdueData(this.villageId, 1);
				}
			},
			showRcglTimeFn() {
				this.showRcglTime = !this.showRcglTime
				if (!this.showRcglTime) {
					this.getInvestigateData()
					this.getPunchRecordData()
					this.getOverdueData(this.villageId, 2);
				}
			},
			changeClllTime({
				detail: {
					value
				}
			}) {
				this.clllTime = value
			},
			changeTsjyTime({
				detail: {
					value
				}
			}) {
				this.tsjyTime = value
			},
			changeRcglTime({
				detail: {
					value
				}
			}) {
				this.rcglTime = value
			},
			// 获取投诉建议数据
			getSuggestData() {
				uni.request({
					url: this.url + '/largescreen/Suggest?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						isOperation: 1,
						villageId: this.villageId,
						year: this.yearList[this.tsjyTime[0]],
						month: this.monthList[this.tsjyTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						const data = e.data.data
						// console.log(data)
						this.tsjyHeadData = {
							assigned: data.assigned,
							followUp: data.followUp,
							finish: data.finish,
							overdue: data.overdue,
						}
						// this.tsjyEchartLeftOption.series[1].data[0].value = data.assigned
						// this.tsjyEchartLeftOption.series[1].data[1].value = data.followUp
						// this.tsjyEchartLeftOption.series[1].data[2].value = data.finish
						// this.tsjyEchartLeftOption.series[1].data[3].value = data.overdue

						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}

						this.tsjyEchartLeftOption.series[1].data = arr;

						this.tsjyEchartRightOption.yAxis.data = data.yAxis
						this.tsjyEchartRightOption.series[0].data = data.xAxis
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取日常管理数据
			getInvestigateData() {
				uni.request({
					url: this.url + '/largescreen/Investigate?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						isOperation: 1,
						villageId: this.villageId,
						year: this.yearList[this.rcglTime[0]],
						month: this.monthList[this.rcglTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						// console.log(e.data.data)
						const data = e.data.data
						this.rcglHeadData = {
							todayCount: data.todayCount,
							weekCount: data.weekCount,
							monthCount: data.monthCount,
						}

						// this.rcglEchartLeftOption.series[0].data[0].value = data.assigned
						// this.rcglEchartLeftOption.series[0].data[1].value = data.followUp
						// this.rcglEchartLeftOption.series[0].data[2].value = data.finish
						// this.rcglEchartLeftOption.series[0].data[3].value = data.overdue

						let arr = []
						if (data.assigned != 0) {
							arr.push({
								value: data.assigned,
								name: '待指派',
								itemStyle: {
									color: '#FD8F21'
								}
							})
						}
						if (data.followUp != 0) {
							arr.push({
								value: data.followUp,
								name: '跟进中',
								itemStyle: {
									color: '#DDF7FF'
								}
							})
						}
						if (data.finish != 0) {
							arr.push({
								value: data.finish,
								name: '已完成',
								itemStyle: {
									color: '#26DDF2'
								}
							})
						}
						if (data.overdue != 0) {
							arr.push({
								value: data.overdue,
								name: '已逾期',
								itemStyle: {
									color: '#FD5421'
								}
							})
						}

						this.rcglEchartLeftOption.series[0].data = arr;

						this.rcglEchartLeftOption.series[1].data = []
						// console.log(data.subTypeGroup)
						for (let i = 0; i < data.subTypeGroup.length; i++) {
							this.rcglEchartLeftOption.series[1].data[i] = {
								value: data.subTypeGroup[i].value,
								name: data.subTypeGroup[i].name,
								itemStyle: {
									color: data.subTypeGroup[i].color
								}
							}
						}
					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取逾期数据
			getOverdueData(villageId, type) {
				uni.request({
					url: this.url + '/largescreen/GetOverdueList?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: villageId,
						pageNum: type == 1 ?this.nowPage:this.dateNowPage,
						pageSize: this.pageSize,
						type: type,
						// year: type == 1 ? this.yearList[this.tsjyTime[0]] : this.yearList[this.rcglTime[0]],
						// month: type == 1 ? this.monthList[this.tsjyTime[1]] : this.monthList[this.rcglTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						if (type == 1) {
							this.overdueList = e.data.data.result;
							this.total = e.data.data.totalNum;
							// console.log(this.overdueList)
						} else {
							this.dateOverdueList = e.data.data.result;
							this.dateTotal = e.data.data.totalNum;
							// console.log(this.dateOverdueList)
							// debugger
						}

					},
					fail: e => {
						console.log(e)
					}
				})
			},
			// 获取巡更数据
			getPunchRecordData() {
				uni.request({
					url: this.url + '/largescreen/PunchRecord?sensitive=' + this.sensitive,
					method: 'POST',
					data: {
						villageId: this.villageId,
						year: this.yearList[this.rcglTime[0]],
						month: this.monthList[this.rcglTime[1]],
						sensitive: this.sensitive,
					},
					success: e => {
						const data = e.data.data
						// console.log(data)
						this.rcglEchartRightOption.yAxis.data = data.yAxis
						this.rcglEchartRightOption.series[0].data = data.xAxis

					},
					fail: e => {
						console.log(e)
					}
				})
			},

			getTime() { // 获取时间
				const wMap = ['日', '一', '二', '三', '四', '五', '六', ]
				const date = new Date()
				const y = date.getFullYear()
				const m = date.getMonth() + 1 >= 10 ? date.getMonth() + 1 : '0' + (date.getMonth() + 1)
				const d = date.getDate() >= 10 ? date.getDate() : '0' + date.getDate()
				const w = wMap[date.getDay()]
				const h = date.getHours() >= 10 ? date.getHours() : '0' + date.getHours()
				const min = date.getMinutes() >= 10 ? date.getMinutes() : '0' + date.getMinutes()
				const s = date.getSeconds() >= 10 ? date.getSeconds() : '0' + date.getSeconds()
				this.time = h + ':' + min + ':' + s
				this.date = y + '-' + m + '-' + d + ' 星期' + w
			},
			getTemperature() { // 设置温度
				uni.request({
					url: "https://restapi.amap.com/v3/weather/weatherInfo?key=ecd60baf0cc86faf25642730ff682823&city=%E4%B8%AD%E5%B1%B1%E5%B8%82&extensions=base",
					success: (e) => {
						this.weather = e.data.lives[0].weather;
						this.temperature = e.data.lives[0].temperature_float + '­°C'
						// console.log('e', e);
					}
				})
			},
			openWindows(type) { // 打开投诉建议/日常管理
				this.openType = type;
				if (type == 1) {
					this.detailStatus = true;
				} else {
					this.detailDateStatus = true;
				}
			},
			getQueryVariable(variable) { // 获取url参数
			    var query = window.location.href.substring(window.location.href.indexOf('?') + 1);
			    var vars = query.split("&");
			    for (var i=0;i<vars.length;i++) {
			        var pair = vars[i].split("=");
			        if(pair[0] == variable){return pair[1];}
			    }
			    return (false);
			}
		}
	}
</script>

<style>
	@import url(@/static/styles.css);
</style>